<template>
    <div class="outer">
      <div class="box">
        <header class="header fix">
          <a href="javascript:;" class="backImg" @click="flightIndex"></a>
          <div class="dateTitle">
            <p class="dateCity"><span>{{$store.state.train.go}}</span>-<span>{{$store.state.train.back}}</span></p>
            <p class="dateDate"><span class="dateDateL">{{$store.state.train.month}}月{{$store.state.train.day}}日</span><span>{{$store.state.train.Sunday}}</span></p>
          </div>
          <div class="rightInfo"></div>
        </header>
        <date-toggle-tab :calendarArr="calendarArr"
                         @selectCalendar="dateShow = true"
                         @changeCalendar="weelSel"></date-toggle-tab>
        <div  class="bugDate" v-show="bugShow">{{bugDate}}</div>
        <!--是否符合差旅计划-->
        <div class="travel_off">
          <div class="off_itme">
            <p>仅显示符合差旅标准的车次</p>
            <input type="checkbox"  v-model="$store.state.train.traintravelval" @click="train_travel_click($event)">
          </div>
        </div>
        <div class="tips_text" v-if="tipsText">{{isFiltertext}}</div>
      </div>
      <div class="main" :class="tipsText ? 'main-height' : 'no-main-height'">
        <scroll :data="trainList" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0">
          <ul class="content" v-if="trainList.length>0">
            <li class="list" v-for="(item,index) in trainList" @click="trainListDetail(item,index)">
              <div class="listHead fix">
                <div class="liCol1">
                  <p class="start">{{item.dto.fromStation}}</p>
                  <p class="startTime">{{item.dto.fromTime}}</p>
                </div>
                <div class="liCol2">
                  <p class="trainN">{{item.dto.trainCode}}</p>
                  <p></p>
                  <p class="trainDur">{{item.dto.costTimeString}}</p>
                </div>
                <div class="liCol3">
                  <p class="arrive">{{item.dto.arriveStation}}</p>
                  <p class="arriveTime">{{item.dto.arriveTime}}</p>
                </div>
                <div class="liCol4">
                  ￥ <span>{{item.dto.lowerPrice}}</span> 起
                </div>
              </div>
              <div class="dash"></div>
              <div class="listFoot fix">
                <div class="LFCol" v-for="it in item.ticketSeatDtos">
                  {{it.seatTypeValue}}:{{it.seatNum}}张
                </div>
              </div>
            </li>
          </ul>
        </scroll>
      </div>
      <footer>
        <tabbar v-model="selected1" :fixed="true">
          <tab-item id="排序" @click.native="popupVisible1 = true" size="large">
            <i slot="icon" class="iconfont icon-jiage"></i>
            排序
          </tab-item>
          <tab-item id="舱位" @click.native="popupVisible2 = true" size="large">
            <i slot="icon" class="iconfont icon-huoche"></i>
            <!--高铁动车（G/D/C）-->高铁动车
          </tab-item>
          <tab-item id="综合筛选" @click.native="popupVisible3 = true" size="large">
            <i slot="icon" class="iconfont icon-zongheshaixuan-"></i>
            综合筛选
          </tab-item>
        </tabbar>
      </footer>
      <!--排序-->
      <div v-transfer-dom>
        <popup v-model="popupVisible1 " position="bottom" style="background-color: #fff">
          <div v-for="(pop,index) in popInfo" class="popItem" :class="{activePop:pop.isSelected}" @click="popActive(index)">
            {{pop.name}}<i class="iconfont icon-duihao r" v-show="pop.popShowCheck"></i>
          </div>
        </popup>
      </div>
      <!--车型-->
      <div v-transfer-dom>
        <popup v-model="popupVisible2 " position="bottom" style="background-color: #fff">
          <div v-for="(pop,index) in popInfo1" class="popItem" :class="{activePop:pop.isSelected}"
               @click="popActive1(index)">
            {{pop.name}}<i class="iconfont icon-duihao r" v-show="pop.popShowCheck"></i>
          </div>
        </popup>
      </div>
      <!--综合筛选-->
      <div v-transfer-dom>
       <popup v-model="popupVisible3" position="bottom" style="background-color: #fff">
        <div class="filterBox fix">
          <div class="showSel">
            <p class="showSelItem fix" v-for="(tabInfo,index) in tabInfo[0].tabInfos" v-show="tabInfo.a" @click="buxian(0,index)">
              <span class="showSelItem1">座位</span><span class="showSelItem2 ell">{{tabInfo.name}}</span><span class="showSelItem3">*</span>
            </p>
            <p class="showSelItem fix" v-for="(tabInfo,index) in tabInfo[1].tabInfos" v-show="tabInfo.a" @click="buxian(1,index)">
              <span class="showSelItem1">出发车站</span><span class="showSelItem2 ell">{{tabInfo.name}}</span><span class="showSelItem3">*</span>
            </p>
            <p class="showSelItem fix" v-for="(tabInfo,index) in tabInfo[2].tabInfos" v-show="tabInfo.a" @click="buxian(2,index)">
              <span class="showSelItem1">到达车站</span><span class="showSelItem2 ell">{{tabInfo.name}}</span><span class="showSelItem3">*</span>
            </p>
            <p class="showSelItem fix" v-for="(tabInfo,index) in tabInfo[3].tabInfos" v-show="tabInfo.a" @click="buxian(3,index)">
              <span class="showSelItem1">出发时间</span><span class="showSelItem2 ell">{{tabInfo.name}}</span><span class="showSelItem3">*</span>
            </p>
            <p class="showSelItem fix" v-for="(tabInfo,index) in tabInfo[4].tabInfos" v-show="tabInfo.a" @click="buxian(4,index)">
              <span class="showSelItem1">到达时间</span><span class="showSelItem2 ell">{{tabInfo.name}}</span><span class="showSelItem3">*</span>
            </p>
          </div>
          <div class="empty" @click="emptySel">
            清空筛选
          </div>
        </div>
        <div class="tabBox fix">
          <div class="tab">
            <div class="tabItem"  :class="{activeTabItem:tab.istab}"  v-for="(tab,index) in tabs" @click="tabSel(index)">{{tab.name}}</div>
          </div>
          <div class="tabInfo">
            <!--座位类型-->
            <div class="tabInfoItem"  v-show="a">
              <label v-for="(tabInfo,index) in tabInfo[0].tabInfos" @click="buxian(0,index)">
                <span class="tabInfoSubL">{{tabInfo.name}}</span>
                <span class="tabInfoSubR" v-show="!tabInfo.a"></span>
                <i class="iconfont icon-duihao tabInfoSubR1" v-show="tabInfo.a"></i>
              </label>
            </div>
            <!--出发车站-->
            <div class="tabInfoItem"  v-show="b">
              <label v-for="(tabInfo,index) in tabInfo[1].tabInfos" @click="buxian(1,index)">
                <span class="tabInfoSubL">{{tabInfo.name}}</span>
                <span class="tabInfoSubR" v-show="!tabInfo.a"></span>
                <i class="iconfont icon-duihao tabInfoSubR1" v-show="tabInfo.a"></i>
              </label>
            </div>
            <!--到达车站-->
            <div class="tabInfoItem"  v-show="c">
              <label v-for="(tabInfo,index) in tabInfo[2].tabInfos" @click="buxian(2,index)">
                <span class="tabInfoSubL">{{tabInfo.name}}</span>
                <span class="tabInfoSubR" v-show="!tabInfo.a"></span>
                <i class="iconfont icon-duihao tabInfoSubR1" v-show="tabInfo.a"></i>
              </label>
            </div>
            <!--出发时间-->
            <div class="tabInfoItem"  v-show="d">
              <label v-for="(tabInfo,index) in tabInfo[3].tabInfos" @click="buxian(3,index)">
                <span class="tabInfoSubL">{{tabInfo.name}}</span>
                <span class="tabInfoSubR" v-show="!tabInfo.a"></span>
                <i class="iconfont icon-duihao tabInfoSubR1" v-show="tabInfo.a"></i>
              </label>
            </div>
            <!--到达时间-->
            <div class="tabInfoItem"  v-show="e">
              <label v-for="(tabInfo,index) in tabInfo[4].tabInfos" @click="buxian(4,index)">
                <span class="tabInfoSubL">{{tabInfo.name}}</span>
                <span class="tabInfoSubR" v-show="!tabInfo.a"></span>
                <i class="iconfont icon-duihao tabInfoSubR1" v-show="tabInfo.a"></i>
              </label>
            </div>
          </div>
        </div>
        <div class="queren" @click="queren">
          确认
        </div>
      </popup>
      </div>
      <date @dateClick="dateClick" @dateBack="dateBack" v-show="dateShow" :max="max" :openTime="openTime" backCustom="1"></date>
    </div>
</template>

<script>
  import { Navbar, TabItem ,Tabbar,Indicator} from 'mint-ui';
  import date from '../../components/date.vue';
  import dateToggleTab from '../../components/date-toggle-tab.vue';
  import {Scroll} from 'wxm-common';
  import { Popup, TransferDomDirective as TransferDom} from 'vux'
  import _train from '@/data/train';

  export default{
    data(){
      return {
        dateShow:false,
        a:true,
        b:false,
        c:false,
        d:false,
        e:false,
        searchDate:'',
        selected1: '排序',//底部tab切换默认高亮
        popupVisible1: false,//底部上升  排序
        popupVisible2: false,//底部上升  车型
        popupVisible3: false,//底部上升  综合筛选
        isActive: false,
        bugDate:'',
        bugShow:false,
        isFiltertext:"",
        routerFrom:''
      }
    },
    directives: {
      TransferDom
    },
    components: {Navbar, TabItem, Tabbar, date, dateToggleTab,Scroll,Popup},
    methods: {
      dateBack(){
        this.dateShow = false;
      },
      dateClick(msg){
        this.dateShow = false;
        this.date = msg;
        this.$store.state.train.openTime = msg;



        var year = msg.substring(0,4);
        var month = msg.substring(5,7);
        var day = msg.substring(8,10);

        this.$store.state.train.date1 = month + '月' + day + '日';


        this.$store.state.train.travelTime = msg;
        this.$store.state.train.month = month;
        this.$store.state.train.day = day;
        this.$store.state.train.Sunday = msg.weekGet();
        this.trainAjax({date:1});
      },
      train_travel_click(even){
        this.$store.state.train.traintravelval = even.target.checked;
        this.trainAjax();
      },
      buxian(k, index){
        this.bugDate = '';
//        控制样式
        var arr = this.$store.state.train.tabInfo[k].tabInfos;

        var train = this.$store.state.train;
        var errorNum = arr.length;
        if (index == 0) {
          for (var i = 1; i < arr.length; i++) {
            arr[i].a = false;
          }
          arr[0].a = true;
        } else {
          arr[index].a = !arr[index].a;

          for (var k = 0; k < arr.length; k++) {
            if (arr[k].a == false) {
              errorNum--;
              if (errorNum == 0) {
                arr[0].a = true;
              }
            } else {
              arr[0].a = false;
            }
          }
        }
//        取数据
        train.seatTypes = '';  //根据座位类型进行筛选
        train.fromStations = '';//根据出发车站进行筛选
        train.toStations = '';//根据到达车站进行筛选
        train.fromTimeRanges = '';//根据出发时间段进行过滤
        train.toTimeRanges = '';//根据到达时间段进行过滤


//        座位类型0
        var arr0 = train.tabInfo[0].tabInfos;
        if (arr0[0].a == true) {
          train.seatTypes = '';
        } else {
          for (var i = 0; i < arr0.length; i++) {
            if (arr0[i].a == true) {
              train.seatTypes += arr0[i].type + ','
            }
          }
        }
        train.seatTypes = train.seatTypes.substring(0, train.seatTypes.length - 1);
//        出发车站1
        var arr1 = train.tabInfo[1].tabInfos;
        if (arr1[0].a == true) {
          train.fromStations = '';
        } else {
          for (var i = 0; i < arr1.length; i++) {
            if (arr1[i].a == true) {
              train.fromStations += arr1[i].name + ','
            }
          }
        }
        train.fromStations = train.fromStations.substring(0, train.fromStations.length - 1);
//        到达车站2
        var arr2 = train.tabInfo[2].tabInfos;
        if (arr2[0].a == true) {
          train.toStations = '';
        } else {
          for (var i = 0; i < arr2.length; i++) {
            if (arr2[i].a == true) {
              train.toStations += arr2[i].name + ','
            }
          }
        }
        train.toStations = train.toStations.substring(0, train.toStations.length - 1);
//        出发时间3
        var arr3 = train.tabInfo[3].tabInfos;
        if (arr3[0].a == true) {
          train.fromTimeRanges = '';
        } else {
          for (var i = 0; i < arr3.length; i++) {
            if (arr3[i].a == true) {
              train.fromTimeRanges += i + ','
            }
          }
        }
        train.fromTimeRanges = train.fromTimeRanges.substring(0, train.fromTimeRanges.length - 1);
//        达到时间4
        var arr4 = train.tabInfo[4].tabInfos;
        if (arr4[0].a == true) {
          train.toTimeRanges = '';
        } else {
          for (var i = 0; i < arr4.length; i++) {
            if (arr4[i].a == true) {
              train.toTimeRanges += i + ','
            }
          }
        }
        train.toTimeRanges = train.toTimeRanges.substring(0, train.toTimeRanges.length - 1);

        this.bugDate = 'fadsfadsf';
      },//综合筛选单个点击
      emptySel(){
         for(var i= 0;i<this.tabInfo.length;i++){
             for (var j = 0; j< this.tabInfo[i].tabInfos.length ; j++){
               this.tabInfo[i].tabInfos[j].a = false;
             }
           this.$store.state.train.tabInfo[i].tabInfos[0].a = true;
         }
        this.$store.state.train.popInfo = this.tabInfo;
      },
      goRouter(){
        var navItem = this.selected.charAt(this.selected.length - 1);
        switch (navItem) {

        };
        this.$store.state.train.travelTime = this.$store.state.train.week[navItem].travelTime;

        this.$store.state.train.selected = navItem;

        this.$store.state.train.Sunday =  this.$store.state.train.week[navItem].week;
        this.trainAjax();
      }, //重新选择了星期
      weelSel(index){
        this.$store.state.train.travelTime = this.$store.state.train.week[index].fromDate;
        this.$store.state.train.openTime = this.$store.state.train.week[index].fromDate;

        this.$store.state.train.month = this.$store.state.train.travelTime.substring(5,7);
        this.$store.state.train.day = this.$store.state.train.travelTime.substring(8,10);
        this.$store.state.train.Sunday = ' 周' + this.$store.state.train.week[index].week;
        this.trainAjax();

        for (var i = 0;i<this.$store.state.train.week.length;i++){
          this.$store.state.train.week[i].flag = false;
        }

        this.$store.state.train.week[index].flag = true;

      }, //重新选择了星期
      flightIndex(){
        this.$router.go(-1);
      },
      trainListDetail(item,index){
        this.$store.state.train.index = index;
        this.$store.state.train.trainSelected = item;
        this.$router.push({
          name: 'trainListDetail',
        })
      },
      popActive(index){
        for (var i = 0; i < this.popInfo.length; i++) {
          this.popInfo[i].isSelected = false;
          this.popInfo[i].popShowCheck = false;
        }
        this.popInfo[index].isSelected = true;
        this.popInfo[index].popShowCheck = true;
        this.popupVisible1 = false;
        if(index == 0){
        this.$store.state.train.sortNum = 1;
          this.trainAjax();
        }
        if(index == 1){
          this.$store.state.train.sortNum = 2;
          this.trainAjax();
        }
        if(index == 2){
          this.$store.state.train.sortNum = 3;
          this.trainAjax();
        }

      },//排序   点击
      popActive1(index){
        for (var i = 0; i < this.popInfo1.length; i++) {
          this.popInfo1[i].isSelected = false;
          this.popInfo1[i].popShowCheck = false;
        }
        this.popInfo1[index].isSelected = true;
        this.popInfo1[index].popShowCheck = true;
        this.popupVisible2 = false;

       /*这里是修改的车型*/
        this.$store.state.train.transType = index;
        this.trainAjax();
      },//车型  点击
      queren(){
        // 执行加载动画
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
          var train = this.$store.state.train;
          this.popupVisible3 = false;
          var trainSearchForm = {
          fromCity:train.go,
          toCity:train.back,
          travelTime:train.travelTime,
          sortNum: train.sortNum, /*推荐排序*/
          transType:train.transType,
          seatTypes : train.seatTypes,
          fromStations : train.fromStations,
          toStations : train.toStations,
          fromTimeRanges : train.fromTimeRanges,
          toTimeRanges : train.toTimeRanges,
        };
        var that = this;
        _train.getTrainList(trainSearchForm,function(res){
          if(res.msg == ""){
            that.$store.state.train.train_tanrey_off_on = false;
          }else{
            that.$store.state.train.ticketList = res.ticketList;
            that.$store.state.train.train_tanrey_off_on = true;
            that.isFiltertext = res.msg;
          }
          //判断是否班次
          if(res.ticketList.length<=0){
            Indicator.close();
            alert(res.msg);
            return
          }
          that.$store.state.train.ticketList = res.ticketList||'';
          //星期列表
          that.$store.state.train.week = res.week;
          //拼接几月几号星期几
          that.$store.state.train.month = that.$store.state.train.travelTime.substring(5,7);

          that.$store.state.train.day = that.$store.state.train.travelTime.substring(8,10);

          for(var i=0;i<that.$store.state.train.week.length;i++){
            if(that.$store.state.train.week[i].flag == true){
              that.$store.state.train.Sunday  = `周${that.$store.state.train.week[i].week}`;
              //that.$store.state.train.Sunday  = that.$store.state.train.week[i].week;
            }
          }
          Indicator.close();
        },function(){
          Indicator.close();
          //路由跳转
          that.$router.push({
            name: 'error',
            params:{
              backName: 'trainList',
            }
          });
        });
      },//综合筛选点击
      tabSel(index){
          for (var i = 0; i < this.tabs.length; i++) {
            this.tabs[i].istab = false;
          }
          this.tabs[index].istab = true;

          switch (index) {
            case 0:
              this.a = true;
              this.b = false;
              this.c = false;
              this.d = false;
              this.e = false;
              break;
            case 1:
              this.a = false;
              this.b = true;
              this.c = false;
              this.d = false;
              this.e = false;
              break;
            case 2:
              this.a = false;
              this.b = false;
              this.c = true;
              this.d = false;
              this.e = false;
              break;
            case 3:
              this.a = false;
              this.b = false;
              this.c = false;
              this.d = true;
              this.e = false;
              break;
            case 4:
              this.a = false;
              this.b = false;
              this.c = false;
              this.d = false;
              this.e = true;
              break;
          }
        },
      trainAjax(key){
        var that = this;
        var state = this.$store.state;
        var train = state.train;
        var isFilter = "";
        if(state.train.traintravelval === true){
          isFilter = 1;
        }else{
          isFilter = 0;
        }
        that.$vux.loading.show({
          text: '加载中...'
        })
        var key = key || '';
        var trainSearchForm = {
          seatTypes : train.seatTypes,//座位类型
          fromStations : train.fromStations,//出发车站
          toStations : train.toStations,//到达车站
          fromTimeRanges : train.fromTimeRanges,//出发时间范围
          toTimeRanges : train.toTimeRanges,//到达时间范围
          fromCity: state.train.go,
          toCity: state.train.back,
          travelTime: state.train.travelTime,//出发日期
          transType: state.train.transType, //车型
          sortNum: state.train.sortNum, /*推荐排序*/
          isFilter:isFilter//是否符合差旅计划
        };
        _train.getTrainList(trainSearchForm, function (res) {
          that.$vux.loading.hide();
          if(res.msg == ""){
            that.$store.state.train.train_tanrey_off_on = false;
            that.isFiltertext = '';
            state.train.ticketList = res.ticketList;
          }else{
            that.$store.state.train.train_tanrey_off_on = true;
            that.isFiltertext = res.msg;
            if(res.ticketList.length == []){
              that.$store.state.train.ticketList.trainList = [];
            }else{
              state.train.ticketList = res.ticketList;
            }
          }
          state.train.train_date = state.train.travelTime;
          //如果重新选择了日期控件
          if (key.date == 1) {
            //星期列表
            state.train.week = res.week;
            for (var i = 0; i < state.train.week.length; i++) {
              if (state.train.week[i].flag == true) {
                state.train.Sunday = '周' + state.train.week[i].week;
              }
            }
          }
        },function () {
          that.$router.push({
            name: 'error',
            params: {
              backName: 'flightList',
            }
          });
          that.$vux.loading.hide();
        });
      }
    },
    mounted(){
      //设置顶部初始selected值.这个值绝对不要放在computed中设置.因为它只设置一次.computed每次加载都要从新计算
      this.selected = this.$store.state.train.selected;

      if(this.$route.query.fromName == 'train'){
        this.$store.state.train.traintravelval = true;
      }else{
        this.trainAjax();
      }

      //综合筛选数据
      //综合筛选数据初始化
      for (var i = 0; i < this.tabs.length; i++) {
        this.$store.state.train.tabs[i].istab = false;
      }
      this.$store.state.train.tabs[0].istab = true;
      this.a = true;
      this.b = false;
      this.c = false;
      this.d = false;
      this.e = false;


    },
    watch:{},
    computed:{
      calendarArr() {
        return this.$store.state.train.week
      },
      openTime(){
        return this.$store.state.train.openTime
      },
      max(){
        return '29'.future();
      },
      trainList(){
        return this.$store.state.train.ticketList.trainList;
      },
      popInfo(){
        return this.$store.state.train.popInfo
      }, //排序
      popInfo1(){
        var transType = this.$store.state.train.transType;
        var length =  this.$store.state.train.popInfo1.length;
        for(var i = 0; i<length ;i++){
          this.$store.state.train.popInfo1[i].isSelected = false;
          this.$store.state.train.popInfo1[i].popShowCheck = false;
        }
        this.$store.state.train.popInfo1[transType].isSelected = true;
        this.$store.state.train.popInfo1[transType].popShowCheck = true;
        return this.$store.state.train.popInfo1
      }, //车型
      tabs(){
        return this.$store.state.train.tabs
      },
      tabInfo(){
        return this.$store.state.train.tabInfo
      },
      // train_travel_val(){
      //   return this.$store.state.train.traintravelval;
      // },
      tipsText(){
        return this.$store.state.train.train_tanrey_off_on;
      }
    }

  }

</script>


<style scoped>
  .travel_off{
    width: 100%;
    height: 2rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
  }
  .off_itme{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 2rem;
    padding: 0 .5rem;
  }
  .off_itme p{
    flex: 0 0 90%;
    font-size: .7rem;
    height: 2rem;
    color: #666;
    line-height: 2rem;
  }
  .off_itme input{
    flex: 0 0 10%;
    height: .8rem;
    margin-top: .55rem;
  }
  .tips_text{
    display: flex;
    padding: 0 .5rem;
    text-align: left;
    height: 2rem;
    align-items: center;
    background-color: #efefef;
  }
</style>

<!--自定义头-->
<style scoped>
  .header {
    background: #46a1bb;
    height: 2.2rem;
    background-size: cover;
    color: #fff;
    padding: 0 .75rem;
    display: flex;
    width: 100%;
  }

  .backImg {
    float: left;
    flex:  0 0 15%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }
  .rightInfo {
    flex:  0 0 15%;
  }

  .dateTitle {
    height: 1.95rem;
    margin-top: .25rem;
    flex:  0 0 60%;
    text-align: center;
  }

  .dateCity {
    line-height: 1;
    font-size: .9rem;
  }

  .dateDate {
    line-height: 1;
    margin-top: .15rem;
    font-size: .7rem;
  }

  .dateDateL {
    margin-right: .2rem;
  }
</style>


<!--综合筛选-->
<style scoped>
  /*筛选结果*/

  .empty{
    color: #46a1bb;
    font-size: .75rem;
    float: right;
    margin-bottom: .5rem;
    margin-top: .5rem;
    margin-right: 1.5%;
  }
  .filterBox{
    border-top: 1px solid #ddd;
    padding: .25rem .45rem  0 .45rem;
  }
  .showSel{
    width: 100%;
    overflow: auto;
  }

  .showSelItem{
    border: 1px solid #46a1bb;
    width: 46%;
    height: 1.4rem;
    line-height: 1.4rem;
    color: #46a1bb;
    box-sizing: border-box;
    font-size: .65rem;
    float: left;
    margin: 0 2% .55rem ;
  }

  .showSelItem1{
    float: left;
    margin-left: .25rem;
    margin-right: .25rem;
  }
  .showSelItem2{
    float: left;
  }
  .showSelItem3{
    float: right;
    margin-right: .25rem;
  }

  /*筛选条件*/
  .tabBox{
    display: flex;
    width: 100%;
    border-top: 1px solid #ddd;
  }
  .queren{
    height: 2.5rem;
    width: 100%;
    background-color: #46a1bb;
    text-align: center;
    line-height: 2.5rem;
    color: #fff;
    font-size: .9rem;
  }


  .mint-popup-bottom {
    width: 100%;
  }

  .tab {
    flex:  0 0 30%;
    font-size: .75rem;
  }

  .tabInfo {
    flex:  0 0 70%;
    height: 12.5rem;
    overflow: auto;
  }

  .tabInfoSubL {
    font-size: .75rem;
    margin-left: 1.2rem;
  }

  .tabInfoSubR {
    float: right;
    width: .75rem;
    height: .75rem;
    margin: .75rem 1.5rem;
    border: 1px solid #46a1bb;
  }

  .tabInfoSubR1 {
    float: right;
    width: .75rem;
    height: .75rem;
    margin: 0 1.5rem;
    font-size: .75rem;
    color: #46a1bb;
  }

  .tabItem {
    height: 2.5rem;
    line-height: 2.5rem;
    width: 100%;
    background-color: #fff;
    text-align: center;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }

  .tab .activeTabItem{
    background-color: #46a1bb;
    border-right: none;
    color: #fff;
  }

  .tabInfoItem {
    height: 2.5rem;
    line-height: 2.5rem;
    width: 100%;
  }

  .tabInfoItem label{
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
    border-bottom: 1px solid #ddd;
  }


</style>

<style scoped>
  .popItem {
    line-height: 2.5rem;
    width: 100%;
    border-bottom: 1px solid #ddd;
    font-size: .75rem;
    box-sizing: border-box;
    padding: 0 1.2rem;
  }

  .activePop {
    color: #46a1bb                                                                                          ;
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>

  .box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }

  .flightType {
    margin-top: .25rem;
  }


  .money {
    color: #f60;
    font-size: .9rem;
    margin-bottom: .2rem;
  }

  .moneyIco{
    font-size: .65rem;
  }

  .startDate {
    font-size: .9rem;
    margin-bottom: .2rem;
    color: #333;
  }

  .toDate{
    font-size: .9rem;
    margin-bottom: .2rem;
    color: #333;
  }

  .list {
    display: flex;
    flex-direction: column;
    padding: .75rem .5rem;
    color: #666666;
    border-bottom: .25rem solid #fafafa;
    .listHead{
      position: relative;
      .liCol1{
        position: relative;
        float: left;
        width: 5rem;
        .start{
          font-size: .75rem;
          color: #333333;
          margin-bottom: .25rem;
        }
        .startTime{
          color: #0094db;
          font-size: .75rem;
        }
      }
      .liCol2{
        position: relative;
        float: left;
        min-width: 2.75rem;
        background-size: 100%;
        text-align: center;
        background: url("../../assets/images/trainListBg.png") no-repeat center .65rem;
        .trainN{
          color: #333333;
          font-size: .55rem;
          margin-bottom: .5rem;

        }
        .trainDur{
          color: #333333;
          font-size: .55rem;
        }
      }
      .liCol3{
        position: relative;
        float: left;
        width: 5rem;
        text-align: right;
        margin-bottom: .75rem;
        .arrive{
          font-size: .75rem;
          color: #333333;
          margin-bottom: .2rem;
        }
        .arriveTime{
          color: #0094db;
          font-size: .75rem;
        }
      }
      .liCol4{
        position: relative;
        float: right;
        color: #f60;
        span{
          font-size: .85rem;
        }
      }
    }
    .listFoot{
      position: relative;
      width: 100%;
      display: flex;
      color: #999;
      .LFCol{
       margin-top: .5rem;
        position: relative;
        flex: 1;
        text-align: left;
      }
      .LFCol:last-child {
        flex: 0 0 22%;
        text-align: left;
      }
    }
  }
  .dash{
    width: 100%;
    height: 0;
    border-bottom: 1px dashed #ddd;
  }
  .liL {
    width: 5.75rem;
    text-align: left;
  }

  .listSub .liR {
    float: right;
  }

  .liM {
    width: 5.75rem;
    text-align: center;
  }

  .liLine {
    width: 2.25rem;
    height: .25rem;
    background: url("../../assets/images/goBackLine90.png") no-repeat;
    margin: .75rem .125rem;
    background-size: cover;
  }

  .listSub > div {
    float: left;
  }

  .outer {
    width: 100%;
    position: relative;
    background-color: #e6e6e6;
    height: 100%;
    font-size: .6rem;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    -overflow-scrolling: touch;
  }
  .outer ::-webkit-scrollbar {
    display: none;
  }

  .main {
    position: relative;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
  }
  .main-height {
    height: calc(100% - 11.7rem);
    margin-top: 9.2rem;
  }
  /*高度问题*/
  .no-main-height {
    height: 23.2rem;
   /* height: calc(100% - 9.7rem);*/
    margin-top: 7.2rem;
  }

  .main>ul{
    -webkit-overflow-scrolling: touch;
    height: 100%;
    overflow: auto;
  }

  .title {
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    color: #fff;
    background-color: #0d496b;
    padding: .25rem .75rem;
    height: 2.4rem;
  }

  .title .dateTab {
    float: left;
    width: 90%;
  }
  .title .dateTab .container {
    width: 100%;
    display: flex;
  }
  .title .dateTab .container>div {
    flex: 1;
  }

  .itemDate {
    flex: 1;
    text-align: center;
    padding: .25rem 0;
    border-radius: .25rem;
    font-size: .6rem;
  }

  .itemDateNum {
    margin-top: .25rem;
  }

  .dateImg {
    color: #3e3a39;
    float: right;
    width: 10%;
    text-align: center;
    height: 1.75rem;
    background: url("../../assets/images/calendar.png") no-repeat center center;
    background-size: 1.05rem 1.15rem ;
  }
</style>

<style scoped>
  footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .is-selected {
    border: none;
    background-color: #0094db;
    color: #46a1bb!important;
    margin-bottom: 0;
  }
  .is-fixed {
    font-weight: 700!important;
  }
  .mint-navbar {
    background-color: #0d496b;
  }
</style>




